<include file="header" />
<link rel="stylesheet" href="/assets/bower_components/sweetalert/lib/sweet-alert.css?v={BEESCRM:$time}">
</head>
<body>
<div class="wraper">
    <div class="load">
        <img class="load-bee" src="/assets/base/carreserve/images/load-bee.png">
    </div>
	<div class="head clearfix">
		<a href="javascript:history.go(-1);" class="iconfont icon-zuo pull-left"></a>
		<span class="head-name pull-left">乘车信息</span>
		<a href="/base/carReserve/index/car_id/{BEESCRM:$car_id}" class="pull-left text-right iconfont icon-shouye"></a>
	</div>
	<div class="block-space">
		<div class="contain"  style="margin-bottom: 10px">
			<div class="ticket">
				<p class="strong">{BEESCRM:$data.start_address} <span class="iconfont icon-arrowgo"></span>{BEESCRM:$data.end_address}</p>
				<p>发车时间：{BEESCRM:$data.send_time|date="Y-m-d H:i",###}</p>
				<p>发车地点：{BEESCRM:$data.start_address}</p>
			</div>
			<div class="wave-rown"></div>
			<div class="block-space">
				<div class="tb-mode margin-b">
					<p class="tb-cell">数量：<!-- <input class="information" id="num" value="1" size="5"/>--><span id="num">1</span></p>
					<p class="tb-cell text-right">总价：<span class="price">￥{BEESCRM:$data.price}元 / 人</span></p>
				</div>
			</div>
		</div>
		<div class="userinfo">
			<div class="lists">
				<div class="form-list tb-mode">
					 <p class="tb-cell field">预约姓名</p>
					 <p class="tb-cell"><input class="information username" placeholder="请填写乘客的真实姓名"/></p>
				</div>
				<div class="form-list tb-mode">
					 <p class="tb-cell field">联系方式</p>
					 <p class="tb-cell"><input class="information mobile" placeholder="请填写乘客的联系电话"/></p>
				</div>
				<div class="form-list tb-mode">
					 <p class="tb-cell field">身份证号</p>
					 <p class="tb-cell"><input class="information card_num" placeholder="请填写乘客的身份证号码"/></p>
				</div>
			</div>
		</div>
		<div class="lists text-center goon">+ 继续添加</div>
	</div>
	<input type="hidden" value="{BEESCRM:$line_id}" id="line_id">
	<input type="hidden" value="{BEESCRM:$car_id}" id="car_id">
	<input type="hidden" value="1" id="goods_num">
	<input type="hidden" value="{BEESCRM:$data.price}" id="goods_price">
	<div class="fixed-box" style="position: absolute;bottom: 0;">
		<a href="javascript:void(0);" class="btn">立即支付</a>
		<div class="rule clearfix">
			<p class="rule-title">—— 包车进度 ——</p>
			<div class="step">
				<p class="iconfont icon-1 text-green"></p>
				<p>选择路线</p>
			</div>
			<div class="step">
				<p class="iconfont icon-2 text-green"></p>
				<p>预约支付</p>
			</div>
			<div class="step">
				<p class="iconfont icon-3"></p>
				<p>等待成团</p>
			</div>
			<div class="step">
				<p class="iconfont icon-4"></p>
				<p>包车成功</p>
			</div>
		</div>
	</div>
</div>
<script src="/assets/base/carreserve/js/jquery-2.1.0.min.js"></script>
<script src="/assets/base/carreserve/js/jq.utils.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/assets/bower_components/sweetalert/lib/sweet-alert.min.js"></script>
<script>
	$(function(){
		var height = $(window).height();
		var fixed_h = $('.fixed-box').height();
		$('.wraper').css("paddingBottom",fixed_h);
		$('.wraper').css("minHeight",height)
	});

	$(window).load(function(){
		$('.load').hide();
	});

	//提交支付
	$(document).ready(function() {
		$(document).on('click', '.btn', function () {
			var line_id = $("#line_id").val();
			var username = [];
			var mobile = [];
			var card_num = [];
			var car_id = $('#car_id').val();
			var num = $('#goods_num').val();

			$(".username").each(function (i) {
				if ($(this).val()) {
					username[i] = $(this).val();
				}
			});

			$(".mobile").each(function (i) {
				if ($(this).val()) {
					mobile[i] = $(this).val()
				}
			});

			var bool = false;
			$(".card_num").each(function (i) {
				if ($(this).val()) {
					var val = $(this).val();
					var exg = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
					if (exg.test(val)) {
						card_num[i] = $(this).val();
					} else {
						$.alert('error', '预约人' + (i + 1) + '身份证号码格式不对');
						bool = true;
						return false;
					}
				}
			});

			if (bool) {
				return false;
			}

			if (!line_id) {
				$.alert('error', '参数错误');
				return false;
			}

			if (username.length != num) {
				$.alert('error', '请填写完整所有乘车人姓名');
				return false;
			}

			if (mobile.length != num) {
				$.alert('error', '请填写完整所有乘车人联系方式');
				return false;
			}

			if (card_num.length != num) {
				$.alert('error', '请填写完整所有乘车人身份证号码');
				return false;
			}

			$.ajax({
				'url': "/base/carReserve/topay/car_id/" + car_id,
				'data': {'line_id': line_id, 'username': username, 'mobile': mobile, 'card_num': card_num, 'num': num},
				'dataType': 'json',
				'type': 'POST',
				'async': false,
				success: function (data) {
					if (data.status == 'S') {
						var wxpay = $.parseJSON(data.wxpay);
						pay(wxpay);
					} else {
						$.alert('error', data.message);
						return false;
					}
				}
			});

			//微支付
			function pay(wxpay) {
				if (typeof WeixinJSBridge == "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', jsApiCall);
						document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
					}
				} else {
					WeixinJSBridge.invoke(
							'getBrandWCPayRequest',
							wxpay,
							function (res) {
								WeixinJSBridge.log(res.err_msg);
								if (res.err_msg == "get_brand_wcpay_request:ok") {
									paySuccess();
								} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
									$.alert('error', '付款已取消');
									return false;
								} else {
									$.alert('error', '调用微支付失败');
									return false;
								}
							}
					);
				}
			}

			function paySuccess() {
				location.href = "/base/carReserve/log/car_id/" + car_id;
			}
		});
	});

	//继续添加
	$('.goon').on('click',function(){
		var str = '<div class="lists">'
				+'<div class="form-list tb-mode">'
				+'<p class="tb-cell field">预约姓名</p>'
				+'<p class="tb-cell"><input class="information username" placeholder="请填写乘客的真实姓名"/></p>'
				+'</div>'
				+'<div class="form-list tb-mode">'
				+'<p class="tb-cell field">联系方式</p>'
				+'<p class="tb-cell"><input class="information mobile" placeholder="请填写乘客的真实联系方式"/></p>'
				+'</div>'
				+'<div class="form-list tb-mode">'
				+'<p class="tb-cell field">身份证号</p>'
				+'<p class="tb-cell"><input class="information card_num" placeholder="请填写乘客的真实身份证号码"/></p>'
				+'</div>'
				+'<div class="form-list">'
				+'<a href="javascript:void(0);" class="text-red text-center delete" style="display:block;">- 删除</a>'
				+'</div>'
				+'</div>';
		$('.userinfo').append(str);
		var goods_num = $('#goods_num').val();
		var goods_price = $('#goods_price').val();
		goods_num = parseInt(goods_num) + 1;
		goods_price = goods_price * goods_num;
		$('#goods_num').val(goods_num);
		$('#num').html(goods_num);
		$('.price').html('￥'+goods_price+'元 / 人');
	});


	//删除
	$(document).ready(function(){
		$(document).on('click','.delete',function(){
			var goods_num = $('#goods_num').val();
			var goods_price = $('#goods_price').val();
			goods_num = parseInt(goods_num) - 1;
			if(goods_num > 0){
				goods_price = goods_price * goods_num;
				$('#goods_num').val(goods_num);
				$('#num').html(goods_num);
				$('.price').html('￥'+goods_price+'元 / 人');
				$(this).parent().parent().remove();
			}
		});
	})
</script>
</body>
</html>